import React from 'react';
import { map } from 'lodash';
import { ListGroup, Jumbotron, Container } from 'react-bootstrap';
import ZSpinner from '../ZSpinner';
import { useProducts } from '../../service';

const Banner = ({ style }) => (
  <Jumbotron style={style}>
    <h3>请选择产品</h3>
    <p>进入产品详情页面会立即开始屏幕录制</p>
  </Jumbotron>
);

const ProductListPane = ({ products }) => (
  <ListGroup>
    {map(products, ({ id, name }) => (
      <ListGroup.Item action key={id} href={`/products/${id}`}>
        {name}
      </ListGroup.Item>
    ))}
  </ListGroup>
);

const ProductList = () => {
  const [loading, products] = useProducts();

  return (
    <ZSpinner loading={loading}>
      <Container>
        <Banner style={{ marginTop: '1rem' }} />
        <ProductListPane products={products} />
      </Container>
    </ZSpinner>
  );
};

export default ProductList;
